<template>
  <div class="login_container flex-center">
    <div class="login_box padding-20">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <div class="switch-bt">
        <el-switch
          v-model="logswitch"
          active-text="登录"
          inactive-text="注册" class="fr">
        </el-switch>
      </div>
      <!-- 登录表单区域 -->
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" class="login_form" v-show="loginone" label-width="60px">
          <el-form-item prop="email" label="邮箱">
            <el-input v-model="ruleForm.email" required></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="ruleForm.password" type="password" required></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm','login')" :loading="loading">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
      </el-form>
      <!-- 注册表单区域 -->
      <el-form :model="register" ref="register" :rules="regis" class="regis_form" v-show="logintwo" label-width="80px">
         <el-form-item prop="email" label="注册邮箱">
            <el-input v-model="register.email" required></el-input>
          </el-form-item>
          <el-form-item prop="code" label="验证码" class="code">
            <el-input v-model="register.code" required></el-input>
          </el-form-item>
          <div class="odebtn fr">
            <el-button type="primary" @click="regcode()" :loading="codebtn">注册</el-button>
          </div>
          <el-form-item prop="password" label="密码">
            <el-input v-model="register.password" type="password" required></el-input>
          </el-form-item>
          <el-form-item prop="checkPass" label="确认密码">
            <el-input v-model="register.checkPass" type="password" required></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('register','reig')" :loading="regbtn">提交</el-button>
            <el-button @click="resetForm('register')">重置</el-button>
          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码1'));
        } else if (value !== this.register.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      // 登录板块
      loading: false, // 登录提交loading
      logswitch: true,
      loginone: true,// 登录显示
      logintwo: false,// 注册显示
      // 这是登录表单的数据绑定对象
      ruleForm: {
        email: '2570304823@qq.com',
        password: '123456'
      },
      rules: {
        email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
        { min: 13, max: 18, message: '长度在 6到 11QQ邮箱。 ', trigger: 'blur' }
      ],
      password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 13, message: '长度在 6到 13 密码。', trigger: 'blur' }
        ]
      },
      // 注册板块
      register: {
        email: '2570304823@qq.com',
        code: '',
        password:'',
        checkPass: ''
      },
      codebtn: false,  // 注册btn
      regbtn: false, //注册提交btn
      regis: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
          { min: 13, max: 18, message: '长度在 6到 11QQ邮箱。 ', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 13, message: '长度在 6到 13 密码。', trigger: 'blur' }
        ],
        checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
    submitForm(formName,nmae) {
      console.log(formName,nmae)
      if (nmae === 'login') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.login()
          } else {
            return false;
          }
        });
      } else {
        console.log('注册')
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.reglogin()
          } else {
            return false;
          }
        });
      }
    },
    login() {
      this.loading = false
      this.axiosRequest({
        url: '/api/login',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {
        this.loading = false
        res = res.data
        if (res.status == 200) {
          window.localStorage.setItem("exam",res.data.token) 
          window.localStorage.setItem("examinfo",JSON.stringify(res.data.info))
          this.$router.push('/home')
        }else {
          this.$message.error(res.message+'错误码：'+res.status);
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 控制登录注册显示隐藏
    toggle: function() {
        this.logintwo = !this.logintwo
        this.loginone = !this.loginone
     },
     regcode() {
        this.codebtn = true
        this.axiosRequest({
          url: '/api/getcode',
          method: 'get',
          params: {
            email: this.register.email
          }
        }).then((res) => {
          this.codebtn = false
          res = res.data
          if (res.status == 200) {
            console.log('code回来', res.data)
            this.register.code = res.data
          }else {
            this.$message.error(res.message+'错误码：'+res.status);
          }
        })
     },
     reglogin() {
      this.regbtn = true
      this.axiosRequest({
        url: '/api/register',
        method: 'post',
        data: {
          email: this.register.email,
          code: this.register.code,
          psd: this.register.password
        }
      }).then((res) => {
        this.loading = false
        res = res.data
        if (res.status == 200) {
         console.log(res.data)
         this.$message.success(res.message);
         this.toggle()
        }else {
          this.$message.error(res.message+'错误码：'+res.status);
        }
      })
     }
  },
  watch: {
    logswitch(newName, oldName) {
      if (newName) {
        console.log(newName,'登录')
        this.toggle()
      } else {
        console.log(newName,'注册')
        this.toggle()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
  width: 100%;
  .login_box {
    width: 450px;
    background-color: #fff;
    border-radius: 3px;
    position: relative;
    .switch-bt {
      height: 70px;
    }
    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .regis_form {
      .code {
        display: inline-block;
        width: 70%;
      }
      .codebtn {
        display: inline-block;
      }
    }
  }
}
.btns {
  display: flex;
  justify-content: flex-end;
}

</style>
